<template>
	<div class = "div1">
		<el-backtop target = ".div1"></el-backtop>
		<!-- 头部 -->
		<div class = "heads">
			<div class = "big-center">
				<div class = "center">
					<el-row :gutter = "20">
						<el-col :span = "8">
							<div class = "top-left">
								<div class = "logoname">欢迎进入省钱兄科技</div>
								<div class = "logins">
									<span v-if = "userId==''" @click = "goAbute('/login')">请登录</span>
									<span v-if = "userId==''" class = "xian">|</span>
									<span v-if = "userId==''" @click = "goAbute('/login?navgatorIndex=3')">免费注册</span>
									<span v-if="userId" @click="quit()">退出登录</span>
								</div>
							</div>
						</el-col>
						<el-col :span = "5"><div class = "kong"></div></el-col>
						<el-col :span = "11">
							<div class = "top-right">
								<span @click = "goAbute('/?index=0')">首页</span>
								<span @click = "goShoppingCar('/order')">个人中心</span>
								<span>
									<span @click="goAbute('/empty')" class = "el-dropdown-link" style = "color: #999;">
										客户服务
									</span>
								</span>
								<span>
									<el-dropdown @command = "handleCommand">
										<span class = "el-dropdown-link" style = "color: #999;">
											网站导航<i class = "el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot = "dropdown">
											<div style = "width: 200px;display: inline-block;">
												<el-dropdown-item v-for = "(item,index) in list" :key = "index"
																  :command = "item.url">{{ item.name }}</el-dropdown-item>
											</div>

										</el-dropdown-menu>
									</el-dropdown>
								</span>
								<span>
									<el-dropdown>
										<span class = "el-dropdown-link" style = "color: #999;">
											手机版<i class = "el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot = "dropdown">
											<el-dropdown-item>
												<img src = "../../assets/foot/app.png"/>
											</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class = "big-centers">
				<div class = "center">
					<div class = "cons left" @click = "goHome()">
						<img src = "../../assets/head/logo.png"/>
					</div>
					<div class = "cons cont">
						<div class = "searchs">
							<el-input placeholder = "请输入内容" v-model = "value" class = "input-with-select">
								<el-button slot = "append" icon = "el-icon-search" @click = "sousuo()">搜索</el-button>
							</el-input>
						</div>
						<div class = "search-list">
							<div v-for = "(item,index) in searchList" :key = "index" :class = "index<=2?'one':'four'"
								 @click = "goSearch(item)">
								<span v-if = "index==0" class = "re bao">爆</span>
								<span v-if = "index==1||index==2" class = "re">热</span>
								{{ item }}
							</div>
						</div>
					</div>
					<div class = "cons right">
						<div class = "myCars">
<!--							<div>-->
<!--								<img class = "carimg" src = "../../assets/head/card.png"/>-->
<!--								<span class = "myCar" @click = "goShop('/shoppingCar')">我的购物车</span>-->
<!--							</div>-->
<!--							<el-badge v-if = "dataC" :value = "dataC.length" class = "item">-->
<!--								<img class = "carimg" src = "../../assets/head/card.png"/>-->
<!--								<span class = "myCar" @click = "goShoppingCar('/shoppingCar')">我的购物车</span>-->
<!--							</el-badge>-->
							<div>
								<img class = "carimg" src = "../../assets/head/card.png"/>
								<span class = "myCar" @click = "goShoppingCar('/shoppingCar')">我的购物车</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 中部内容 -->
		<div style = "background: #F6F5F7;">
			<div class = "tong three">
				<div class = "table_main">
					<table>
						<tbody>
							<!--							<tr>
								<th class="left-th">分类</th>
								<th class="right-th">
									<div v-for="(item,index) in classList" :key="index" :class="index==active2?'active2':''" class="className" @click="classOn(index)">{{item}}</div>
								</th>
							</tr>
							<tr>
								<th class="left-th">筛查</th>
								<th class="right-th">
									月销量<input :value="number1" type="number" class="yxl" />
									价格<input :value="number2" type="number" class="yxl jiage1" />~<input :value="number3" type="number" class="yxl jiage1" />
								</th>
							</tr>-->
							<tr>
								<th class = "left-th">排序</th>
								<th class = "border-bt right-th">
									<div v-for = "(item,index) in classList1" :key = "index" :class = "index==active3?'active2':''"
										 class = "className" @click = "classOn1(index,item)">{{ item.title }}</div>
								</th>
							</tr>
						</tbody>
					</table>

				</div>
			</div>
			<div class = "tong three" v-if = "dataList.content!=0">
<!--				<goodsItem :data = "dataList.content"></goodsItem>-->
				<goodsItem3 :title="title" :isVip = "relationId!='null'?true: false" :data = "dataList.content"></goodsItem3>
			</div>
			<el-empty v-else description = "暂无数据" :image-size = "300"></el-empty>
			<div v-if = "dataList.totalElements!=0" style = "text-align: center;margin: 10px;">
					<el-pagination background @current-change = "BrowseChange" :page-size = "10" :current-page = "page"
								   layout = "prev, pager, next" :total = "dataList.totalElements">
					</el-pagination>
				</div>
			<!--			<div class = "tong three">-->
			<!--				<el-pagination background style = "text-align: center;padding-bottom: 50px;" layout = "prev, pager, next" :total = "1000"-->
			<!--							   @current-change = "handleCurrentChange" :current-page = "page">-->
			<!--				</el-pagination>-->
			<!--			</div>-->

		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
	import Head from '@/components/head.vue'
	import Foots from '@/components/foots.vue'
	import goodsItem3 from "../../components/goods-item3";
	import {Loading} from "element-ui";

	export default {
		components: {
			Head,
			Foots,
			goodsItem3
		},
		data() {
			return {
				dataC: [],
				value: '',
				list: [
					{name: '首页', url: '/?index=0'},
					{name: '热卖榜单', url: '/?index=1'},
					{name: '精选好物', url: '/?index=2'},
					{name: '每日上线', url: '/?index=3'},
					{name: '拼团购', url: '/?index=4'},
					{name: '个人中心', url: '/order'},
				],
				relationId:	window.localStorage.getItem('relationId'),	//邀请码
				page: 1,
				size: 10,
				searchList: [],
				active1: 0,
				active2: 0,
				active3: 0,
				number1: '',
				number2: '',
				number3: '',
				dataList: [],
				classList: ['全部', '女装', '男装', '美妆', '内衣', '配饰', '箱包', '鞋品', '美食', '电器', '母婴', '儿童'],
				classList1: [
					{
						title: '默认排序',
						type: 'createAt'
					},
					{
						title: '销量',
						type: 'sales'
					},
					// {
					// 	title: '佣金',
					// 	type: 'commissionPrice'
					// },
					{
						title: '超低价',
						type: 'price'
					}
				],
				sort: 'createAt',
				id: '',
				title: '',
				type:''
			}
		},
		created() {

			this.id = this.$route.query.id
			this.title = this.$route.query.title
			this.type = this.$route.query.type
			if (this.title == '拼团购') {
				this.sort = 'createTime'
			} else {
				this.sort = 'createAt'
			}
			this.getData()
			this.getSearchList()
		},
		computed: {
			userId() {
				// return this.$store.state.userId
				return this.$cookie.get('userId')
			},
		},
		methods: {
			getSearchList() {
				this.$http({
					url: this.$http.adornUrl('/common/type/285'),	//热词
					method: 'get',
				}).then(({data}) => {
					this.searchList = data.data.value.split(',')
				})
			},
			BrowseChange(val) {
				this.page = val;
				this.getData()
			},
			goShoppingCar(url) {
				if(this.userId) {
					this.$router.push({
						path: url
					})
				} else {
					this.$router.push({
						path: '/login'
					})
				}
			},
			goHome() {
				this.$router.push({
					path: '/'
				})
			},
			goAbute(url) {
				this.$router.push({
					path: url
				})
			},
			goShop(url) {
				if(this.userId) {
					this.$router.push({
						path: url
					})
				}else {
					this.$router.push({
						path: '/login'
					})
				}
			},
			handleCommand(command) {
				this.$router.push({
					path: command
				})
			},
			sousuo() {
				if (this.value == '') {
					this.$message('搜索内容不能为空')
					return
				}
				this.getData()

			},
			getData() {
				let loadingInstance = Loading.service({
					lock: true,
					text: '加载中……',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				if (this.title == '热卖榜单') {
					this.$http({
						url: this.$http.adornUrl('/goods/selling'),
						method: 'get',
						params: this.$http.adornParams({
							'sort': this.sort,
							'page': this.page - 1,
							'size': this.size,
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				} else if (this.title == '精选好物') {
					this.$http({
						url: this.$http.adornUrl('/goods/selectGoods'),
						method: 'get',
						params: this.$http.adornParams({
							'sort': this.sort,
							'page': this.page - 1,
							'size': this.size,
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				} else if (this.title == '每日上新') {
					this.$http({
						url: this.$http.adornUrl('/goods/news'),
						method: 'get',
						params: this.$http.adornParams({
							'sort': this.sort,
							'page': this.page - 1,
							'size': this.size,
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				} else if (this.title == '拼团购') {

					this.$http({
						url: this.$http.adornUrl('/selfGroup/userList'),
						method: 'get',
						params: this.$http.adornParams({
							'sort': this.sort,
							'page': this.page - 1,
							'size': this.size,
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				} else if (this.title == '为你推荐') {
					this.$http({
						url: this.$http.adornUrl('/goods/recommend'),
						method: 'get',
						params: this.$http.adornParams({
							'sort': this.sort,
							'page': this.page - 1,
							'size': this.size,
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				}else {
					this.$http({
						url: this.$http.adornUrl('/goods/userList'),
						method: 'get',
						params: this.$http.adornParams({
							'page': this.page - 1,
							'size': this.size,
							'sort': this.sort,
							'type': this.type
						})
					}).then(({data}) => {
						loadingInstance.close();
						if (data.status == 0) {
							this.dataList = data.data
						}
					})
				}
			},

			onNavigation1(index) {
				this.active1 = index
			},
			classOn(index) {
				this.active2 = index
			},
			classOn1(index,item) {
				this.active3 = index
				this.sort = item.type
				this.getData()
			},
			onClick(id) {
			},
			handleCurrentChange(val) {
				this.page = val
			},
			quanbuClick() {
			},
			goSearch(e) {
				this.value = e
				this.getData()
			},
			//退出登录
			quit() {
				this.$store.commit('updateUserId','')
				this.$store.commit('updateRelationId','')

				this.$cookie.set('uuid','')
				this.$cookie.set('userId','')
				this.$cookie.set('relationId', '')
				this.$cookie.set('image_url', '')
				this.$cookie.set('nickName', '')
				this.$cookie.set('phone', '')
				this.$router.go(0)
			}

		}
	}
</script>

<style scoped = "scoped">
	.div1 {
		height: 100vh;
		overflow-x: hidden;
	}

	/* 导航 */
	.navigation {
		background: #FF2D55;
		height: 40px;
		line-height: 40px;
		color: #fff;
	}

	.navList {
		width: 1200px;
		margin: 0 auto;
	}


	/* 第一部分 */
	.tong {
		width: 1200px;
		margin: 0 auto;
		margin-top: 15px;
	}


	.active1 {
		background: #FF2D55;
		color: #fff;
	}

	/* 筛选表格 */
	.table_main table {
		width: 100%;
	}

	.table_main {
		border: 1px solid #e8e8e8;

	}

	table tr {
		/* border-bottom: 1px solid #e8e8e8; */
		background: #fff;
	}

	table tr th {
		padding: 16px 24px;
		/* border-right: 1px solid #e8e8e8; */
		/* border-bottom: 1px solid #e8e8e8; */
	}

	table tr td {
		padding: 16px 24px;
		/* border-right: 1px solid #e8e8e8; */
		border-bottom: 1px solid #e8e8e8;
	}

	table th {
		color: rgba(0, 0, 0, .85);
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
	}

	.border-rt {
		border-right: none !important;
	}

	.border-bt {
		border-bottom: none !important;
	}

	.left-th {
		color: #333;
		width: 50px;
		line-height: 50px;
	}

	.right-th {
		text-align: left;
		padding-left: 30px;
	}

	.className {
		display: inline-block;
		/* width: 50px; */
		background-color: #fff;
		font-size: 14px;
		color: #333;
		margin: 10px 5px;
		padding: 0 20px;
		text-align: center;
		cursor: pointer;
	}

	.active2 {
		background: #FF2D55;
		color: #fff;
		border-radius: 4px;
	}

	.yxl {
		width: 70px;
		margin: 0 50px 0 10px;
		border: 1px solid #E6E6E6;
		height: 30px;
		line-height: 30px;
		border-radius: 4px;
	}

	.jiage1 {
		margin: 0 20px;
		width: 50px;
	}

	.big-center {
		width: 100%;
		height: 24px;
		line-height: 24px;
		color: #999;
		font-size: 14px;
		background: #E6E6E6;
	}

	.center {
		width: 1200px;
		margin: 0 auto;
	}

	.top-left {
		text-align: left;

	}

	.top-left div {
		display: inline-block;
	}

	.logoname {
		width: 40%;
	}

	.logins {
		width: 50%;
		text-align: center;
	}

	.logins span {
		color: #999;
		text-decoration: none;
	}

	.logins span:hover {
		color: #FF0D18;
		cursor: pointer;
	}

	.xian {
		margin: 0 10px;
	}

	.kong {
		width: 100%;
		height: 24px;
	}

	.top-right {
		text-align: right;
	}

	.top-right span {
		display: inline-block;
		margin-left: 20px;
		color: #999;
		text-decoration: none;
	}

	.top-right span:hover {
		color: #FF0D18;
		cursor: pointer;
	}

	.big-centers {
		width: 100%;
		height: 120px;
		/* line-height: 120px; */
	}

	.big-centers .center .cons {
		display: inline-block;
	}

	.left {
		width: 30%;
		text-align: left;
	}

	.left img {
		position: relative;
		bottom: 6px;
	}

	.cont {
		width: 49%;

	}

	.searchs {
		padding-top: 26px;
	}

	.search-list {
		text-align: left;
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}

	.search-list div {
		display: inline-block;
		width: 16%;
		cursor: pointer;
	}

	.one {
		color: #FF0D18;
	}

	.one .re {
		display: inline-block;
		font-size: 12px;
		border: 1px solid #FF0D18;
		/* width: 14px;
		height: 14px; */
		border-radius: 2px;
		background: #FFC1C1;
		padding: 0 2px;
		/* margin-right: 6px; */
	}

	.right {
		width: 20%;
		text-align: right;
		color: #FF2D55;
		font-size: 18px;
	}

	.myCars {
		position: relative;
		bottom: 20px;
		border: 2px solid #FF2D55;
		border-radius: 4px;
		width: 65%;
		text-align: center;
		height: 45px;
		line-height: 45px;
		margin-left: 35%;
		cursor: pointer;
	}

	.carimg {
		position: relative;
		top: 3px;
	}

	.el-input-group__append, .el-input-group__prepend {
		background: #FF2D55 !important;
		color: #fff !important;
		border: 1px solid #FF2D55 !important;
	}
</style>
